<template>
	<view class="createPerson-page">
		<view class="createPerson-photo">
			<image src="../../static/image.png" mode=""></image>
		</view>
		<view class="createPerson-part">
			<view class="teacher-name">
				<view class="name">
					<text>老师姓名：</text>
				</view>
				<view class="inp">
					<input type="text"  />
				</view>
			</view>
			<view class="teacher-phone">
				<view class="name">
					<text>联系电话：</text>
				</view>
				<view class="inp">
					<input type="text"  />
				</view>
			</view>
			<view class="class-name">
				<view class="name">
					<text>班级名称：</text>
				</view>
				<view class="inp">
					<input type="text"  />
				</view>
			</view>
			<view class="school-name">
				<view class="name">
				   <text>所属学校：</text>
				</view>
				<view class="inp">
				   <input type="text" />
				</view>
			</view>
			<view class="discipline-each">
				<view class="name">
					<text>学科：</text>
				</view>
				<view class="inp">
					<radio-group class="radio-group">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in radioGather" :key="item.value">
							<view class="radio-embark">
								<radio :value="item.value" :checked="item.checked" style="transform: scale(0.7)"  />
							</view>
							<view><text>{{item.value}}</text></view>
						</label>
					</radio-group>
				</view>
			</view>
			<view class="protocol-explain">
				<label>
					<checkbox :checked="explain" style="transform:scale(0.7)" @click="protocol" /><text>协议说明</text>
				</label>
			</view>
			<view class="notarize-submit">
				<button type="primary" @click="notarize">确认</button>
			</view>
		</view>
		<CreateQRcode :mark="mark" :code="code" @saveCode="saveCode" />
	</view>
</template>

<script>
  import CreateQRcode from '@/components/createQRcode/index.vue';
  export default{
	  data(){
		  return{
			  radioGather:[
				  {
					  "value":"数学",
					  "checked":true
				  },
				  {
					  "value":"语文",
					  "checked":false
				  },
				  {
					  "value":"英语",
					  "checked":false
				  }
			  ],
			  explain:false,
			  code:"A1MVLL",
			  mark:true
		  }
	  },
	  created(){
	  },
	  components:{
		  CreateQRcode
	  },
	  methods:{
		  notarize(){
			  if(this.explain){
				  this.mark=false;
				  console.log(this.mark)
			  }
			  else{
				  uni.showToast({
				  	title: "请勾选协议说明",
				  	icon: "none"
				  });
			  }
		  },
		  protocol(e){
			  this.explain=!this.explain;
		  },
		  saveCode(path){
			  console.log(path)
			  uni.setStorageSync('storage_key',path)
			  this.$Router.push({
			  	name:'personal',
			  	params:{}
			  })
		  }
	  }
  }
</script>

<style lang="scss" scoped>
	page,.createPerson-page{
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		position: relative;
		.markHide{
			display: none;
		}
		.createPerson-mark{
			position: absolute;
			top:0;
			bottom:0;
			width: 100%;
			z-index: 1;
			background:rgba(0,0,0,0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			.mark-part{
				height: 60%;
				width: 80%;
				background: white;
				border-radius: 15upx;
				display: flex;
				flex-direction: column;
				&>.Invitation-code{
					width: 100%;
					flex: 2;
					display: flex;
					flex-direction: column;
					padding: 30upx 0upx;
					box-sizing: border-box;
					&>text{
						flex: 1;
						font-size: 34upx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					&>.code-yard{
						font-size: 42upx;
						color: #409EFF;
					}
				}
				&>.Invitation-QRcode{
					width: 100%;
					flex: 8;
					display: flex;
					flex-direction: column;
					&>.QRcode-image{
						flex: 7;
						width:100%;
						display: flex;
						align-items: center;
						justify-content: center;
						&>image{
							width: 55%;
							height: 80%;
						}
					}
					&>.QRcode-button{
						flex: 3;
						display: flex;
						justify-content: space-around;
						align-items: center;
						&>button{
							width: 40%;
							height: 80upx;
							font-size: 32upx;
							border:none;
							background: #409EFF;
							border-radius:50upx;
						}
					}
				}
			}
		}
		.createPerson-photo{
			width: 100%;
			flex: 3;
			display: flex;
			align-items: center;
			justify-content: center;
			&>image{
				width: 200upx;
				height: 200upx;
			}
		}
		.createPerson-part{
			flex: 7;
			display: flex;
			flex-direction: column;
			.notarize-submit{
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				&>button{
					width: 85%;
					height: 80upx;
					font-size: 32upx;
					border:none;
					background: #409EFF;
				}
			}
			&>.protocol-explain{
				width: 100%;
				height: 100upx;
				font-size: 32upx;
				display: flex;
				align-items: center;
				padding:0upx 50upx;
				box-sizing: border-box;
				&>.must-explain{
					width:50upx;
					height: 50upx;
				}
			}
			&>.class-name,
			.school-name,
			.teacher-name,
			.teacher-phone,
			.discipline-each{
				width: 100%;
				height: 100upx;
				font-size: 32upx;
				display: flex;
				align-items: center;
				padding:0upx 30upx;
				box-sizing: border-box;
				position: relative;
				&>.name{
					width:200upx;
					padding-right:30upx;
					display: flex;
					justify-content:flex-end;
				}
				&>.inp{
					flex: 1;
					&>.radio-group{
						width: 100%;
						display: flex;
						&>.uni-list-cell{
							flex: 1;
							display: flex;
							align-items: center;
						}
					}
				}
				&::after{
					content: "";
					position: absolute;
					height: 2upx;
					width: 100%;
					background: #e6e6e6;
					bottom: 0;
					left: 0;
				}
			}
		}
		.createPerson-save{
			justify-content: center;
			align-items: center;
			&>button{
				width: 85%;
				height: 80upx;
				font-size: 32upx;
				border:none;
				background: #409EFF;
			}
		}
	}
</style>
